<template>
    <div id="home">
        <!--        轮播图-->
        <div id="slide">
            <el-row>
                <el-carousel indicator-position="outside">
                    <el-carousel-item v-for="item in pics" :key="item.id">
                        <!--                <h3>{{ item }}</h3>-->
                        <img :src="item.imgUrl" alt="" class="pic" style="width: 100%;height: 100%">
                    </el-carousel-item>
                </el-carousel>
            </el-row>
        </div>

        <!--推荐课程-->
        <div id="lessonTitle" style="margin: 20px auto">
            <el-row>
                <div style="text-align: left">
                    <h1>患者服务</h1>
                </div>
            </el-row>
        </div>

        <div id="lessonContent" style="margin:15px auto;">
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-card shadow="hover" style="height: 150px;background-color: #67C23A">
                        医患沟通中心
                        <br>
                        ［名 称］ 医患沟通中心［负责人］ 王洪兵［电　话］<span style="color: blue">0517-80871628</span>
                        <br>

                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" style="height: 150px;background-color: #67C23A">
                        医院办公室
                        <br>
                        ［名 称］ 医院办公室 ［负责人］ 唐莉 ［电　话］ <span style="color: blue">（0517）80871616</span>
                        <br>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" style="height: 150px;background-color: #67C23A">
                        医务处
                        <br>
                        ［名称］ 医务处［负责人］ 姜福金［电　话］   <span style="color: blue">（0517）80871603</span>
                        <br>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" style="height: 150px;background-color: #67C23A">
                        信息中心
                        <br>
                        [名 称]信息中心 [负责人]王小青 [电 话] <span style="color: blue">0517-80871622 </span>
                        <br>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!--        排名信息-->
        <div id="rankTitle" style="margin-top: 50px">
            <el-row>
                <div style="text-align: left">
                    <h1>医院部门联系电话</h1>
                </div>
            </el-row>
        </div>

        <div id="lessonContent" style="margin:15px auto;">
            <el-row :gutter="10">
                <el-col :span="8">
                    <el-card shadow="hover" style="height: 150px;background-color: #409EFF">
                        财务处
                        <br>
                        ［名称］ 财务处 ［负责人］ 张彦明［电　话］  <span style="color: blue">（0517）80871818 </span>
                        <br>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" style="height: 150px;background-color: #409EFF">
                        监督审查室
                        <br>
                        ［名称］ 监察室［负责人］ 胡雪峰［电　话］  <span style="color: blue">（0517）80871609 </span>
                        <br>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" style="height: 150px;background-color: #409EFF">
                        药学部
                        <br>
                        负责人：张国桃
                        联系电话：80871704、2151 <span style="color: blue">0517-80871622 </span>
                        <br>
                    </el-card>
                </el-col>
            </el-row>

            <el-row :gutter="10" style="margin-top: 15px">
                <el-col :span="8">
                    <el-card shadow="hover" style="height: 150px;background-color: #409EFF">
                        感管处
                        <br>
                        ［名　称］ 院感染管理处［负责人］ 徐艳［电　话］ <span style="color: blue">（0517）80871607 </span>
                        <br>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" style="height: 150px;background-color: #409EFF">

                        人事处
                        <br>
                        ［名称］ 人事处［负责人］郑金玉［电　话］   <span style="color: blue"> （0517）80871606</span>
                        <br>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" style="height: 150px;background-color: #409EFF">

                        医务处
                        <br>
                        ［名称］ 医务处［负责人］ 姜福金［电　话］  <span style="color: blue">（0517）80871603 </span>
                        <br>
                    </el-card>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>

export default {
    name: "StudentHome",
    components: {
    },
    data() {
        return {
            /* 图片数组  图片的地址绑定需要使用require() */
            pics: [
                {id: 1, imgUrl: require('@/assets/images/img_4.jpg')},
                {id: 2, imgUrl: require('@/assets/images/img_5.jpg')},
                {id: 3, imgUrl: require('@/assets/images/img_4.jpg')},
            ],
        }
    },

    computed: {
        lessonList() {
            // this.numberColor.background = this.$store.state.lessons[2].color;
            return this.$store.getters.getAllLesson;
        },
        lessonList2() {
            // this.numberColor.background = this.$store.state.lessons[2].color;
            return this.$store.getters.getAllLesson2;
        },
        name() {
            return this.$store.state.name;
            /*指的是this.$store*/
        }
    },
    methods: {

    }
};

</script>

<style scoped>
.nums {
    width: 32px;
    height: 32px;
    color: white;
    background-color: lightskyblue;
    padding-top: 6px;
    vertical-align: middle;
    text-align: center;
}

.chart {
    height: 400px;
}
html {
    overflow-y: scroll;
}
:root {
    overflow-y: auto;
    overflow-x: hidden;
}

:root body {
    position: absolute;
}

body {
    width: 100vw;
    overflow: hidden;
}
</style>
